import React, { Suspense } from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
const Home = React.lazy(() => import('./views/home'))
const Detail = React.lazy(() => import('./views/detail'))
const Login = React.lazy(() => import('./views/login'))
const City = React.lazy(() => import('./views/city'))
const My = React.lazy(() => import('./views/my'))
const Layout = React.lazy(() => import('./views/layout'))

function App() {
  return (
    <div className="App">
      <Suspense>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<Layout></Layout>}>
              <Route index element={<Home></Home>}></Route>
              <Route path="/my" element={<My></My>}></Route>
            </Route>
            <Route path="/detail/:id" element={<Detail></Detail>}></Route>
            <Route path="/city" element={<City></City>}></Route>
            <Route path="/login" element={<Login></Login>}></Route>
          </Routes>
        </BrowserRouter>
      </Suspense>
    </div>
  );
}

export default App;
